import React from "react";
import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom';
import { NAVBAR_WORDS } from '../../../constant';
import { Space } from "antd";
import './index.less';
const NavbarLink: React.FC = () => {

  const { t, i18n } = useTranslation();
  const [refresh, setRefresh] = React.useState(Date.now());
  const getClassName = React.useCallback((router: string) => {
    const hash = window.location.hash;
    if (hash === `#${router}`) {
      return 'tab-active-item';
    }
    return 'tab-item';
  }, []);

  React.useEffect(() => {

    const re = () => {
      setRefresh(Date.now());
    }
    window.addEventListener('hashchange', re)
    return () => { window.removeEventListener('hashchange', re) }
  }, [refresh]);

  // 监听点击,刷新页面
  const handleClick = () => {
    setRefresh(Date.now());
  }

  return (
    <Space className="navbar-link-items" size={8}>
      <Link to="/" className={getClassName('/')} onClick={handleClick}>{t(NAVBAR_WORDS.HOME)}</Link>
      <Link to="/news" className={getClassName('/news')} onClick={handleClick}>{t(NAVBAR_WORDS.NEWS)}</Link>
      <Link to="/products" className={getClassName('/products')} onClick={handleClick}>{t(NAVBAR_WORDS.PRODUCTS)}</Link>
      <Link to="/ppp" className={getClassName('/ppp')} onClick={handleClick}>{t(NAVBAR_WORDS.PPP)}</Link>
      <Link to="/download" className={getClassName('/download')} onClick={handleClick}>{t(NAVBAR_WORDS.DOWNLOAD)}</Link>
      <Link to="/tools" className={getClassName('/tools')} onClick={handleClick}>{t(NAVBAR_WORDS.TOOLS)}</Link>
      <Link to="/publications" className={getClassName('/publications')} onClick={handleClick}>{t(NAVBAR_WORDS.PUBLICATIONS)}</Link>
      <Link to="/about" className={getClassName('/about')} onClick={handleClick}>{t(NAVBAR_WORDS.ABOUT)}</Link>
    </Space>
  )
}

export default NavbarLink;